<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="http://thinku-ielts-new.cc/cn/css/exerciseNew/speakDetail.css?v=1.2">
    <script type="text/javascript" src="http://thinku-ielts-new.cc/cn/js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>
</head>
<body>
<section id="exerciseDetail">
    <!-- 顶部 -->
    <div class="headNav">
        <template>
            <div class="w12 headContent">
                <div class="headTitle">剑桥雅思12口语  Test5</div>
                <div class="clockTime">
                    <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/15@2x.png" alt="">
                    <span>{{time}}</span>
                </div>
                <div class="operateBtn">
                    <a href="javascript:void(0)" class="upData" @click="saveAnswer">SUBMIT</a>
                    <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/16@2x.png" alt="" class="fullScreen"  @click="launchFullscreen">
                </div>
            </div>
        </template>
    </div>
    <!-- 做题部分 -->
    <div class="exerciseCenter">
        <div class="speakTitle">How well do you know the people who live next door to you?</div>
        <!-- 开始答题 -->
        <input name="token" value="12345" type="hidden" id="token"><!--随机生成的token!!!!!!!!!!-->
        <div class="startCover" v-cloak  v-show="recordStatus == -1">
            <a href="javascript:void (0)" class="startBtn" @click="startRecord">
                <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/26.png" alt="">
            </a>
            <p class="speakTip">点击录音开始答题哦</p>
        </div>
        <!-- 音频设备提醒 -->
        <div class="equipTip" v-cloak  v-if="isEquip">
            <div class="equipTipCenter">
                <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip" @click="isEquip = false,recordStatus = -1">
                <p class="equipText">系统检测到您的电脑麦克风音频未开启，<br>
                    请检查音频情况！</p>
                <div class="equipBtnCover">
                    <a href="javascript:void(0)" class="continueBtn" @click="isEquip = false,recordStatus = -1">继续做题</a>
                    <a href="javascript:void(0)" class="qdBtn" @click="isEquip = false,recordStatus = -1">确定</a>
                </div>
            </div>
        </div>
        <!-- 录音中 -->
        <div class="recordingCover"  v-cloak  v-show="recordStatus == 0||recordStatus == 1">
            <a href="javascript:void (0)" class="stopBtn" @click="stopRecord" title="停止录音">
                <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/27.png" alt="">
            </a>
            <!-- 声音波浪 -->
            <canvas id="waves"></canvas>
        </div>
        <!-- 录音完成 -->
        <div class="recordOver" v-cloak  v-show="recordStatus == 2 || recordStatus == 4">
            <!-- 未上传 -->
            <div v-if="recordStatus!=4">
                <p class="againTip">点击按钮可重新答题</p>
                <a href="javascript:void (0)" class="startBtn" @click="againAsk = true">
                    <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/26.png" alt="">
                </a>
            </div>
            <!-- 上传成功 -->
            <div v-if="recordStatus==4" style="text-align: center;">
                <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/29.png" alt="" style="width: 102px;">
                <p class="upSuccess">上传成功!</p>
            </div>
            <div class="operateBtnCover">
                <!-- 音频地址 浏览器录音临时地址用于播放-->
                <audio id="bgAudio" :src="audioUrl!=''?audioUrl:''" controls ></audio>
                <p>你的答案：</p>
                <div class="audioCover">
                    <a href="javascript:void(0)" class="playBtn" v-if="!isPlay" @click="playAudio">
                        <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/17@2x.png" alt="">
                    </a>
                    <a href="javascript:void(0)" class="pauseBtn" v-if="isPlay" @click="playAudio">
                        <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/stop.png" alt="">
                    </a>
                    <p class="time">{{currentTime}}/{{totalTime}}</p>
                </div>
                <!-- 未上传 -->
                <a href="javascript:void(0)" class="upLoadBtn" @click="upload" v-if="recordStatus!=4&&recordStatus!=3">上传</a>
                <!-- 上传中 -->
                <a href="javascript:void(0)" class="upLoadBtn" v-if="recordStatus == 3">上传中</a>
                <!-- 上传成功 -->
                <a href="javascript:void(0)" class="upLoadBtn" @click="againAsk = true" v-if="recordStatus==4">重录</a>
            </div>
        </div>
        <!--  进去下一题 未上传提示 -->
        <div class="equipTip noUpload">
            <div class="equipTipCenter">
                <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip" @click="closePop">
                <p class="equipText">录音还未上传，<br>
                    确定要去下一题吗？</p>
                <div class="equipBtnCover">
                    <a href="javascript:void(0)" class="continueBtn">确定</a>
                    <a href="javascript:void(0)" class="qdBtn"  @click="closePop">没有</a>
                </div>
            </div>
        </div>
        <!-- 重新答题提示 -->
        <div class="equipTip" v-cloak  v-if="againAsk">
            <div class="equipTipCenter">
                <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip" @click="againAsk = false">
                <p class="equipText">是否重新开始答题</p>
                <div class="equipBtnCover">
                    <a href="javascript:window.location.reload()" class="continueBtn">确定</a>
                    <a href="javascript:void(0)" class="qdBtn"  @click="againAsk = false">没有</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footNav">
        <div class="footNavCover">
            <a href="javascript:void(0)" class="reviewBtn">
                REVIEW
                <div class="reviewPop">
                    不确定答案，可随时review，方便再次检查（选中review后题号会变成圆形）
                </div>
            </a>
            <div class="quesNumCover">
                <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
<!--                <a href="javascript:void(0)" :class="{'quesNum':index>-1, 'fulfil': item.status, 'notSure': item.isSure, 'doNow': current == index }" v-for="(item,index) in btnArry">{{index+1}}</a>-->

                <!--                <a href="javascript:void(0)" class="quesNum fulfil">1</a>-->
                <!--                <a href="javascript:void(0)" class="quesNum">2</a>-->
                <!--                <a href="javascript:void(0)" class="quesNum doNow">3</a>-->
                <!--                <a href="javascript:void(0)" class="quesNum notSure">4</a>-->

                <!-- 提示 跟随按钮位置-->
                <div class="quesPop" :style="{display:display,left:left}" v-cloak>
                    <p>白色：已答题</p>
                    <p>灰色：未答题</p>
                    <p>紫色：答题中</p>
                </div>
            </div>
            <div class="turnBtn">
                <a href="javascript:void(0)" class="prevBtn" @click="">
                    <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/18@2x.png" alt="">
                    <span>上一题</span>
                </a>
                <a href="javascript:void(0)" class="nextBtn" @click="">
                    <img src="http://thinku-ielts-new.cc/cn/images/exerciseNew/19@2x.png" alt="">
                    <span>下一题</span>
                </a>
            </div>
        </div>
    </div>

</section>

</body>
<script src="http://thinku-ielts-new.cc/cn/js/exerciseNew/wave.js?v=1.1"></script>
<script src="http://thinku-ielts-new.cc/cn/js/exerciseNew/speakDetail.js?v=1.1"></script>

</html>
